<template>
  <!-- vue3 多个根元素也不会报错 -->
  <cp-nav-bar title="家庭档案" />
  <div class="family">
    <div class="patient-list">
      <div
        class="patient-list-item"
        :class="{ active: item.defaultFlag === 1 }"
        v-for="item in patientList"
        :key="item.id"
      >
        <div class="pli-left">
          <div class="plil-0" v-if="item.defaultFlag === 1">
            <span>默认</span>
            <span>{{ item.idCard.replace(/^(.{4}).+(.{4})$/, `$1**********$2`) }}</span>
          </div>
          <div class="plil-1">
            <span>{{ item.name }}</span>
            <span v-if="item.defaultFlag !== 1">{{
              item.idCard.replace(/^(.{4}).+(.{4})$/, `$1**********$2`)
            }}</span>
          </div>
          <div class="plil-2">
            <span>{{ item.genderValue }}</span>
            <span>{{ item.age }}</span>
          </div>
        </div>
        <div class="pli-right">
          <cp-icon class="cp-icon" name="user-edit" @click="editPatient(item)" />
        </div>
      </div>
    </div>
    <div class="patient-add" @click="showPoppup">
      <div>+</div>
      <div>添加患者</div>
    </div>
    <div style="color: var(--cp-tip)">最多可添加6人</div>
  </div>

  <!-- 下面是新增和修改和删除的弹出框 -->
  <!-- 这里因为 v-if="" 控制popup弹出层的变量在 子组件里面，所以用vif不好实现，所以换成了watch的形式 -->
  <PatientDetail ref="popupRef" @addSuccessEvent="getPatientList" :currentItem="currentItem" />

  <!--下面是测试组件 -->
  <!-- <TestModel :msg="msg" @updateMsg="msg = $event" /> -->
  <!-- <TestModel :modelValue="msg" @update:modelValue="msg = $event" /> -->
  <!-- <TestModel v-model="msg" /> -->
  <!-- <TestModel v-model:msg="msg" v-model:count="count" /> -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
import { getPatientListRequest } from '@/services/patient'
import PatientDetail from './PatientDetail.vue'
// import TestModel from './TestModel.vue'

// 控制popup弹出框显示和隐藏的
// const showRight = ref(false)
const popupRef = ref<any>(null)
// 写数组一定要写类型，不写的话就是 nerver
const patientList = ref<any[]>([])
const getPatientList = async () => {
  const res = await getPatientListRequest()
  patientList.value = res.data
}
// 父组件将当前项的数据传递给子组件里面
const currentItem = ref<any>({})

const msg = ref('hello')
const count = ref(1)

getPatientList()

const showPoppup = () => {
  if (patientList.value.length === 6) {
    showToast('患者信息最多添加6个')
    return
  }
  // 下面这一行很关键，如果新增的时候不重新修改currentItem的值，那么子组件的watch监听这个值的地方就不会重新走watch函数。  这句话就是让子组件watch函数在执行一遍
  currentItem.value = {}
  popupRef.value.openPopup()
}

// 编辑按钮
const editPatient = (item: any) => {
  currentItem.value = item
  // 打开新增的页面，编辑和新增公用同一个页面
  popupRef.value.openPopup()
}
</script>

<style lang="scss" scoped>
.family {
  padding: 15px;
}
.patient-list {
  &-item {
    background-color: var(--cp-bg);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.active {
      border: 1px solid var(--cp-primary);
      background-color: #16c2a322;
      .pli-right {
        color: var(--cp-primary);
      }
    }
    .pli-left {
      .plil-0 {
        margin-bottom: 15px;
        color: var(--cp-tip);
        span:nth-child(1) {
          margin-right: 10px;
          color: var(--cp-white);
          background-color: var(--cp-primary);
          padding: 2px 4px;
          font-size: 14px;
          border-radius: 4px;
        }
      }
      .plil-1 {
        margin-bottom: 15px;
        span:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
        }
        span:nth-child(2) {
          font-size: 16px;
          margin-left: 10px;
        }
      }
      .plil-2 {
        margin-bottom: 15px;
        font-size: 14px;
        color: var(--cp-tip);
        span:nth-child(1) {
        }
        span:nth-child(2) {
          margin-left: 10px;
        }
      }
    }
    .pli-right {
      color: var(--cp-tip);
      font-size: 24px;
    }
  }
}
.patient-add {
  background-color: var(--cp-bg);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--cp-primary);
  div:nth-child(1) {
    font-size: 30px;
  }
}
</style>
